<template>
  <div class="login-container">
    <div class="login-head">
      <div class="log-box"></div>
    </div>
    <el-form class="login-form" ref="form" :rules="rules" :model="form">
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="checked">
        <el-checkbox v-model="form.checked">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" :loading="isLtems" type="primary" @click="onSubmit">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { loginOut } from '@/api/user'
export default {
  name: 'LoginIndex',
  data() {
    return {
      form: {
        mobile: '13911111111',
        code: '246810',
        checked: false,
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          {
            pattern: /^\d{6}$/,
            message: '请输入正确的验证码',
            trigger: 'blur',
          },
        ],
        checked: [
          //自定义验证规则
          // 验证通过：callback()   验证失败：callback(new Erroe('错误消息'))
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请同意用户协议'))
              }
            },
            trigger: 'change',
          },
        ],
      },
      isLtems: false,
    }
  },
  methods: {
    onSubmit() {
      //   const user = this.form
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loginOut_tem() //   验证通过，请求登录
      })
    },
    loginOut_tem() {
      this.isLtems = true
      // request({
      //   method: 'POST',
      //   url: '/mp/v1_0/authorizations',
      //   data: this.form, //data用来设置请求体
      // })
      /**
       * 把所有的接口统一封装成函数，放到Api目录里，管理维护方便，也好重用
       */
      loginOut(this.form)
        .then((res) => {
          this.$message({
            message: '登录成功',
            type: 'success',
          })
          // 后端返回的用户相关数据放到本地存储，方便数据共享
          window.localStorage.setItem('user', JSON.stringify(res.data.data))
          this.isLtems = false
          // this.$router.push('/')  跳转到首页
          this.$router.push({
            name: 'home',
          })
        })
        .catch((err) => {
          this.$message('登录失败，请检查手机号或验证码！！')
          this.isLtems = false
        })
    },
  },
}
</script>
<style lang="less">
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(./login_bg.jpg) no-repeat;
  background-size: cover;
  // login-head
  .log-box {
    position: relative;
    top: 90px;
    width: 300px;
    height: 57px;
    background: url('./logo_index.png') no-repeat;
  }
  .login-form {
    background: #fff;
    padding: 100px 60px 18px 60px;
    min-width: 360px;
    .login-btn {
      width: 100%;
    }
  }
}
</style>
